<template>
  <div>
    <div>
      <van-image
          round
          width="10rem"
          height="10rem"
          :src="require('../assets/xicha.png')"
      />
    </div>
    <br>
    <br>
    <br>
    <br>
    <div>
      <van-tabs>
        <van-tab title="账号密码登录">
          <van-form>
            <van-cell-group inset>
              <van-field
                  v-model="user.phone"
                  label="账号"
                  placeholder="手机号/用户名"
                  :rules="[{ required: true, message: '请填写手机号/用户名' }]"
              />
              <van-field
                  v-model="user.password"
                  type="password"
                  label="密码"
                  placeholder="密码"
                  :rules="[{ required: true, message: '请填写密码' }]"
              />
            </van-cell-group>
            <div style="margin: 16px;">
              <van-button round block type="primary" @click="login()">
                登录
              </van-button>
            </div>
          </van-form>
        </van-tab>
        <van-tab title="手机号验证码登录">
          <van-form>
            <van-cell-group inset>
              <van-field
                  v-model="user1.phone"
                  label="手机号"
                  placeholder="手机号"
                  :rules="[{ required: true, message: '请填写手机号' }]"
              />
              <van-field
                  v-model="user1.code"
                  center
                  clearable
                  label="验证码"
                  placeholder="请输入短信验证码"
              >
                <template #button>
                  <van-button size="small" type="primary" @click="sendCode()" :disabled="btn1">{{str1}}</van-button>
                </template>
              </van-field>
            </van-cell-group>
            <div style="margin: 16px;">
              <van-button round block type="primary" @click="login1()">登录</van-button>
            </div>
          </van-form>
        </van-tab>
      </van-tabs>
    </div>
    <div>
      <!-- 每个元素的两侧间隔相等 -->
      <van-row justify="space-around">
        <van-col span="9">
          <van-button type="warning" @click="regist()"> 注册</van-button>
        </van-col>
        <van-col span="9">
          <van-button plain type="primary" @click="find()">忘记密码</van-button>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "LoginView",
  data() {
    return {
      user: {
        phone: "",
        password: "",
        city: "郑州",
        mobile: "华为nova5pro"
      },
      user1:{
        phone: "",
        code: "",
        city: "杭州",
        mobile: "华为nova5pro"
      },
      str1:"发送验证码",
      btn1:false,
      second:60
    }
  },
  methods: {
    checkPhone() {
      this.axios.get("/user/checkPhone.do?phone=" + this.user1.phone).then((res) => {
        if (res.data.code != 200) {
          this.$toast(res.data.msg);
        }
      })
    },
    login() {
      this.axios.post("/user/passLogin.do", this.user).then((res) => {
        if(res.data.code==200){
          this.$store.commit("setToken",res.data.data);
          this.$router.push("/home");
        }else{
          this.$toast(res.data.msg);
        }
        console.log("此时的tonken为："+this.$store.state.token);
      })
    },
    sendCode(){
      this.axios.get("/smsLog/phoneLogin.do?phone="+this.user1.phone).then((res)=>{
        if(res.data.code==200){
          var c=setInterval(()=>{
            if(this.second>0){
              this.btn1=true;
              this.second--;
              this.str1=this.second+"(s)";
            }else{
              this.btn1=false;
              this.str1="发送验证码";
              this.second=60;
              clearInterval(c);
            }
          },1000);
        }
      })
    },
    login1(){
      this.axios.post("/user/codeLogin.do", this.user1).then((res) => {
        if(res.data.code==200){
          this.$store.setToken(res.data.data);
          this.$router.push("/home");
        }else{
          this.$toast(res.data.msg);
        }
      })
    },
    find(){
      this.$router.push("/find");
    },
    regist(){
      this.$router.push("/regist");
    }
  }
}
</script>

<style scoped>

</style>